<!--
 * @Description: 饼图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:51
-->
<template>
  <div ref="container" style="height:180px"></div>
</template>

<script>
// 1.引入饼图表构造函数
import { Pie, measureTextWidth  } from '@antv/g2plot'
// 2.引入get方法 --->发送get请求
import { get } from '@/utils/request'

export default {
  data() {
    return {
      // 存放设备状态数量
      empData: []
    }
  },
  methods: {
    // 获取设备数据方法 发送请求
    async getEmpData() {
      let res = await get('/dashboard/queryDeviceOnlineNumber');
      //  将后端获取到数据赋值给变量
      let i = 0;
      res.data.forEach((item) => {
        var obj = {
          type: item.type,
          value: item.value,
        }
        switch (obj.type) {
          case '离线': obj.type = '离线'; break;
          case '在线': obj.type = '在线'; break;
          default: break;
        };
        this.empData[i] = obj;
        i++;
      })
      //  获取到数据后去加载图表
      this.loadCharts();
    },

    // 加载饼图方法
    loadCharts() {
      function renderStatistic(containerWidth, text, style) {
        const textWidth = measureTextWidth(text, style);
        const textHeight = style.lineHeight || style.fontSize
        const R = containerWidth / 2;
        // r^2 = (w / 2)^2 + (h - offsetY)^2
        let scale = 1;
        if (containerWidth < textWidth) {
          scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
        }
        const textStyleStr = `width:${containerWidth}px;`;
        return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
      }

      // 3.创建图表实例
      // container====>document.getElementById('container')
      // ref 
      const piePlot = new Pie(this.$refs.container, {
        appendPadding: 10,
        data: this.empData,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.6,
        meta: {
          value: {
            formatter: (v) => `${v} `,
          },
        },
        label: {
          type: 'inner',
          offset: '-50%',
          content: '{value}',
          style: {
            textAlign: 'center',
            fontSize: 15,
          },
        },
        statistic: {
          title: {
            offsetY: -4,
            customHtml: (container, view, datum) => {
              const { width, height } = container.getBoundingClientRect();
              const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
              const text = datum ? datum.type : '设备状态';
              return renderStatistic(d, text, { fontSize: 16 });
            },
          },
          content: {
            offsetY: 4,
            style: {
              fontSize: '32px',
            },
            customHtml: (container, view, datum, data) => {
              const { width } = container.getBoundingClientRect();

              const text = datum ? ` ${datum.value}` : ` ${data.reduce((r, d) => r + d.value, 0)}`;
              return renderStatistic(width, text, { fontSize: 32 });
            },
          },
        },
        // 添加 中心统计文本 交互
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
      });
      // 4.渲染图表
      piePlot.render();
    }
  },
  created() { },
  mounted() {
    this.getEmpData();
  },
};
</script>
<style scoped></style>